<template>
  <div>
    <el-form size="mini" inline>
      <el-form-item>
        <el-date-picker
          v-model="formData.register_date"
          type="daterange"
          value-format="yyyy-MM-dd"
          :clearable="false"
          style="width: 250px"
          start-placeholder="开始日期"
          size="mini"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="loadData" type="primary">搜索</el-button>
        <el-button @click="exportData" type="danger">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="data-table">
      <table v-loading="loading">
        <thead>
        <tr>
          <th>
            竞店名称
          </th>
          <th v-for="d in dateList" :key="d">
            {{ d | shortDateFilter }} 新增数量
          </th>
          <th>
            店铺小计
          </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,itemIndex) in dataList" :key="itemIndex">
          <td>
            {{ item.store_name }}
          </td>
          <td v-for="i in dateList" :key="i">
            {{ item.dates[i] || 0 }}
          </td>
          <td>
            {{ item.total }}
          </td>
        </tr>
        </tbody>
      </table>
      <el-empty v-if="!dataList.length && !loading">

      </el-empty>
    </div>
    <loading-dialog v-model="isExporting" loading-text="正在导出，请稍等"/>
  </div>
</template>

<script>
import moment from 'moment'
import { dicApi } from '@/feature/sys/infra/api/dicApi'
import SysDicTypeEnum from '@/feature/sys/infra/constants/SysDicTypeEnum'
import CompetingStoreBloggerApi from '@/infra/api/mct/CompetingStoreBloggerApi'
import { deliveryComplainApi } from '@/feature/cmt/infra/api/deliveryComplainApi'
import ExcelUtil from '@/framework/infra/excel/ExcelUtil'
import LoadingDialog from '@/framework/components/dialog/LoadingDialog'

export default {
  name: 'UserNewDaily',
  components: { LoadingDialog },
  data() {
    return {
      channelList: [],
      loading: true,
      isExporting: false,
      formData: {
        register_date: [moment().startOf('month').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      },
      dataList: [],
      dateList: []
    }
  },
  created() {
    this.loadData()
  },
  filters: {
    shortDateFilter(v) {
      return v.split('-').slice(1).join('-')
    }
  },
  methods: {
    loadData() {
      this.loading = true
      CompetingStoreBloggerApi.monthStoreBloggerReport(this.formData).then(res => {
        this.dataList = res.dataList
        this.dateList = res.dateList
      }).finally(() => {
        this.loading = false
      })
    },
    exportData() {
      this.isExporting = true
      CompetingStoreBloggerApi.monthStoreBloggerReport(this.formData).then(data => {
        data = data.dataList
        const header = ['竞店名称']
        header.push(...this.dateList.map(el => el + '新增数量'))
        header.push('店铺小计')
        const exportedData = []
        if (data && data.length) {
          for (const row of data) {
            exportedData.push([
              row.store_name,
              ...this.dateList.map(el => row.dates[el] || 0),
              row.total
            ])
          }
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '每月新增[竞店]博主汇总'
        })
      }).finally(() => {
        this.isExporting = false
      })
    }
  }
}
</script>

<style scoped>
.data-table {
  padding-bottom: 100px;
  overflow-x: auto;
  table-layout: fixed;
  white-space: nowrap;
}
</style>
